<template>
  <div class="main_right column-flex">
    <!-- 综合态势监管 -->
    <div class="box right-module-top">
      <!-- 标题 -->
      <h1 class="left-title">保密监管概览</h1>
      <div class="flex">
        <TabList
          ref="tabListRef"
          :data="tabsData"
          @handleClick="handleTabs"
          @handleNumClick="handleNumClick"
        ></TabList>
      </div>
      <RadarEcharts
        ref="radarRef"
        style="height: 72%"
        :dictEntity="dictEntity"
        @mouseover="handleMouseover"
        @mouseleave="handleMouseLeave"
      ></RadarEcharts>
    </div>
    <div class="box right-module-middle">
      <!-- 标题 -->
      <h1 class="left-title">监管重点关注项</h1>
      <div class="flex module-key-wk">
        <div
          class="module-key-list"
          v-for="(item, index) in concernsData"
          :key="index"
          @click="handleSupervisionFocus(item, index)"
        >
          <ConcernsList :data="item"></ConcernsList>
        </div>
      </div>
    </div>
    <!-- 安全运维 -->
    <div class="box right-module-bottom">
      <h1 class="left-title">运维协同响应</h1>
      <div class="flex module-top-wk">
        <div class="flex module-flex">
          <div
            class="concernlists"
            v-for="(item, index) in imgItems"
            :key="index"
          >
            <BorderConcernsList :data="item"></BorderConcernsList>
          </div>
        </div>
        <div
          class="center-bottom-l-cont"
          @mouseover="handleCollaborativeMouseover"
          @mouseleave="handleCollaborativeMouseLeave"
        >
          <pieEcharts
            ref="pieEchartRef"
            style="width: 60%; height: 100%"
            :cdata="pieData"
            @handlePieClick="handlePieClick"
          ></pieEcharts>
          <div class="pieList">
            <div class="pielist-item" v-for="(item, index) in pieData" :key="index">
              <i :class="['pie-icon-' + index]"></i>
              <span class="pielist-item-name">{{ item.statusName }}</span>
              <span :class="['pie-count-' + index]" :title="item.count">{{ item.count>9999?'9999+':item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--     运维协同响应   -->
    <searchDialog
      ref="safeConcernsDialogRef"
      title="事件列表"
      :searchFormObj="imgFormObj"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      :operate-open="true"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
    <!--   监管指标   -->
    <searchDialog
      ref="regulatoryDialogRef"
      title="保密监管列表"
      :searchFormObj="regulatoryFormObj"
      :tableList="regulatoryTableData.tableList"
      :tableData="regulatoryTableData.tableData"
      :total="regulatoryTableData.total"
      :operate-open="true"
      @getTableList="getRegulatoryTableList"
      @operateEvent="operateMetrics"
    ></searchDialog>
    <!--   行为  -->
    <searchDialog
      ref="behaviorDialogRef"
      title="行为标签列表"
      :searchFormObj="behaviorFormObj"
      :tableList="behaviorTableData.tableList"
      :tableData="behaviorTableData.tableData"
      :total="behaviorTableData.total"
      :operate-open="false"
      @getTableList="getBehaviorTableList"
      @operateEvent="operateBehavior"
    ></searchDialog>
  </div>
</template>

<script>
import ShowTotal from "@/components/common/ShowTotal.vue";
import BorderList from "@/components/common/BorderList";
import BorderTopList from "@/components/common/BorderTopList";
import behaviorEcharts from "@/components/echarts/userbehavior/behaviorEcharts.vue";
import pieEcharts from "@/components/echarts/comprehensiveSituation/3dpieEcharts.vue";
import BorderConcernsList from "@/components/common/BorderConcernsList.vue";
import ConcernsList from "@/components/common/ConcernsList.vue";
import TabList from "@/components/common/TabList";
import RadarEcharts from "@/components/echarts/comprehensiveSituation/RadarEcharts";
import {
  eventFocus,
  overview,
  maintenance,
  regulatoryTableList,
  behaviorTableList,
} from "@/api/comprehensiveSituation";
import { safetySituation } from "@/api/comprehensiveSituation";
import searchDialog from "@/components/common/searchDialog";
import { mapState } from "vuex";
import { cloneDeep } from "@/utils/loadash-es";
import obj from "@/components/index/comprehensiveSituation/components/tableData";
import { eventList } from "@/api/confidentialitySupervision";
import { parseTime } from "@/utils/hongke";
import {post} from '@/utils/request.js'

export default {
  components: {
    ShowTotal,
    BorderList,
    BorderTopList,
    behaviorEcharts,
    pieEcharts,
    BorderConcernsList,
    ConcernsList,
    TabList,
    RadarEcharts,
    searchDialog,
  },
  data() {
    return {
      tabsData: [
        { title: "监管指标", count: 0 },
        { title: "行为标签", count: 0 },
      ],
      imgItems: [
        {
          title: "未处置事件数量",
          amount: 0,
          img: "ywxtxy01.png",
          company: "条",
        },
        { title: "处置效率", amount: 0, img: "ywxtxy02.png", company: "%" },
      ],
      keyAllItem: {
        metricsData: {
          names: ["命中数量", "指标数量"],
          value: [],
        },
        ruleData: {
          names: ["标签总数", "启用数量"],
          value: [],
        },
      },
      keyItem: {},
      concernsData: [
        {
          title: "整体监管合规率",
          amount: 0,
          img: "img_router.png",
          company: "%",
        },
        { title: "监管否决项", amount: 0, img: "img_safe.png", company: "条" },
        {
          title: "用户行为异常",
          code: "100",
          amount: 0,
          img: "img_outher.png",
          company: "次",
        },
        {
          title: "管理员行为异常",
          code: "300",
          amount: 0,
          img: "img_import.png",
          company: "次",
        },
      ],
      pieData: [
        { statusName: "未处置", count: 0 },
        { statusName: "已处置", count: 0 },
      ],
      fireWall: [
        {
          title: "防火墙策略",
          ip: "10.11.12.124",
          time: "2022-06-21 12:45",
        },
        {
          title: "防火墙策略",
          ip: "10.11.12.124",
          time: "2022-06-21 12:45",
        },
        {
          title: "防火墙策略",
          ip: "10.11.12.124",
          time: "2022-06-21 12:45",
        },
      ],
      queryParams: {
        searchType: this.$store.state.searchType || "3",
        time:this.$store.state.time
      },
      // 弹窗信息
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      imgFormObj: {
        fieldList: cloneDeep(obj.imgFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
          protectCodeList: this.$store.state.protectCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      regulatoryTableData: {
        tableList: cloneDeep(obj.regulatoryTableList),
        tableData: [],
        total: 0,
      },
      regulatoryFormObj: {
        fieldList: cloneDeep(obj.regulatoryIndicatorsFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      behaviorTableData: {
        tableList: cloneDeep(obj.behaviorTableList),
        tableData: [],
        total: 0,
      },
      behaviorFormObj: {
        fieldList: cloneDeep(obj.behaviorFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      // 弹窗信息
      reinsuranceTableData: {
        imgTableList: cloneDeep(obj.reinsuranceTableList),
        tableData: [],
        total: 0,
      },
      reinsuranceFormObj: {
        fieldList: cloneDeep(obj.imgFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
          protectCodeList: this.$store.state.protectCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      supervise_timer: null,
      collaborative_timer: null,
      currentIndex: 0,
      dictEntity:[]
    };
  },
  computed: {
    ...mapState([
      "levelCodeList",
      "typeCodeList",
      "categoryCodeList",
      "protectCodeList",
      "searchType",
      "time"
    ]),
  },
  watch: {
    // searchType: {
    //   handler(val) {
    //     this.queryParams.searchType = val;
    //     this.getAllData();
    //   },
    //   immediate: true,
    //   deep: true,
    // },
    time:{
      handler(val) {
        if(val && val[0]){
          this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null;
          if(this.$store.state.searchType!='custom'){
            this.queryParams.time=null
          }else{
            this.queryParams.time=this.$store.state.time
          }
        this.getAllData();
        }
      },
      immediate: true,
      deep: true,
    },
    levelCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.levelCodeList = val;
        this.regulatoryFormObj.listTypeInfo.levelCodeList = val;
        this.behaviorFormObj.listTypeInfo.levelCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    typeCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.typeCodeList = val;
        this.regulatoryFormObj.listTypeInfo.typeCodeList = val;
        this.behaviorFormObj.listTypeInfo.typeCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    categoryCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.categoryCodeList = val;
        this.regulatoryFormObj.listTypeInfo.categoryCodeList = val;
        this.behaviorFormObj.listTypeInfo.categoryCodeList = val;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
     this.getDict()
    this.dataSuperviseLoop();
    this.dataCollaborativeLoop();
  },
  methods: {
     // 获取分类字典
     getDict(){
      post('/assetSituation/dicListByCode',{code:'entityType'}).then(res=>{
              this.dictEntity=res.map(i=>{
                return {name:i.itemLabel}
              })
            })
    },
    getAllData() {
      this.getOverview();
      this.getMaintenance();
      this.getEventFocus();
    },
    /** 保密监管概览  */
    getOverview() {
      overview(this.queryParams).then((res) => {
        this.tabsData.forEach((i, index) => {
          if (index == 0) {
            i.count = res.metricsCount;
          } else {
            i.count = res.ruleCount;
          }
          // 命中数量
          let kpiCategoryCounts = {
            name: "命中数量",
            value: [0, 0, 0, 0, 0,0],
          };
          res.kpiCategoryCounts.forEach((i) => {
            switch (i.code) {
              case "0":
                kpiCategoryCounts.value[0] = i.count;
                break;
              case "1":
                kpiCategoryCounts.value[1] = i.count;
                break;
              case "2":
                kpiCategoryCounts.value[2] = i.count;
                break;
              case "3":
                kpiCategoryCounts.value[3] = i.count;
                break;
              case "5":
                kpiCategoryCounts.value[4] = i.count;
                break;
                case "6":
                kpiCategoryCounts.value[5] = i.count;
                break;
            }
          });
          let kpiObjectCategoryCounts = {
            name: "指标数量",
            value: [0, 0, 0, 0, 0,0],
          };
          res.kpiObjectCategoryCounts.forEach((i) => {
            switch (i.code) {
              case "host":
                kpiObjectCategoryCounts.value[0] = i.count;
                break;
              case "person":
                kpiObjectCategoryCounts.value[1] = i.count;
                break;
              case "app":
                kpiObjectCategoryCounts.value[2] = i.count;
                break;
              case "data":
                kpiObjectCategoryCounts.value[3] = i.count;
                break;
              case "net":
                kpiObjectCategoryCounts.value[4] = i.count;
                break;
                case "account":
                kpiObjectCategoryCounts.value[5] = i.count;
                break;
            }
          });
          // 行为指标--标签总数
          let rules = {
            name: "标签总数",
            value: [0, 0, 0, 0, 0,0],
          };
          res.rules.forEach((i, index) => {
            switch (i.code) {
              case "host":
                rules.value[0] = i.count;
                break;
              case "person":
                rules.value[1] = i.count;
                break;
              case "app":
                rules.value[2] = i.count;
                break;
              case "net":
                rules.value[3] = i.count;
                break;
              case "data":
                rules.value[4] = i.count;
                break;
                case "account":
                rules.value[5] = i.count;
                break; 
            }
          });
          // 行为指标--启用数量
          let openRules = {
            name: "启用数量",
            value: [0, 0, 0, 0, 0,0],
          };
          res.openRules.forEach((i, index) => {
            switch (i.code) {
              case "host":
              openRules.value[0] = i.count;
                break;
              case "person":
              openRules.value[1] = i.count;
                break;
              case "app":
              openRules.value[2] = i.count;
                break;
              case "net":
              openRules.value[3] = i.count;
                break;
              case "data":
              openRules.value[4] = i.count;
                break;
                case "account":
                openRules.value[5] = i.count;
                break; 
            }
          });
          this.keyAllItem = {
            /**
             * kpiCategoryCounts  监管指标-命中数量
             * kpiObjectCategoryCounts  监管指标-指标数量
             * */

            metricsData: {
              indicator:[
            { name: "设备" },
            { name: "网络" },
            { name: "应用" },
            { name: "人员" },
            { name: "信息台账" },
            { name: "基础环境" },
          ],
              names: ["命中数量", "指标数量"],
              value: [kpiCategoryCounts, kpiObjectCategoryCounts],
            },
            /**
             * rules  行为标签-标签总数
             * openRules  行为标签-启用数量
             * */
            ruleData: {
              indicator: [
            { name: "主机" },
            { name: "人员" },
            { name: "应用" },
            { name: "数据" },
            { name: "网络" },
            { name: "账号" },
          ],
              names: ["标签总数", "启用数量"],
              value: [rules, openRules],
            },
          };
          this.keyItem = this.keyAllItem.metricsData;
          this.$refs.radarRef.getData(this.keyItem);
        });
      });
    },
    /**  监管重点关注项  */
    async getEventFocus() {
      let res = await eventFocus(this.queryParams);
      let behaviorRes = await safetySituation(this.queryParams);
      if (res) {
        this.concernsData[0].amount = res?.compliance ? res?.compliance : 0;
        this.concernsData[1].amount = res?.rejectionItem
          ? res?.rejectionItem
          : 0;
        if (res.eventCounts.length) {
          this.concernsData.forEach((i) => {
            if (i?.code) {
              res.eventCounts.forEach((j) => {
                if (i.code == j.code) {
                  i.amount = j.count;
                }
              });
            }
          });
        }
      }
      if (behaviorRes) {
        this.concernsData[2].amount = 0;
        this.concernsData[3].amount = 0;
        this.concernsData.forEach((item) => {
          behaviorRes.forEach((i, index) => {
            if (item.code == i.code) {
              item.amount = i.count;
            }
          });
        });
      }
    },
    /** 运维协同响应 */
    getMaintenance() {
      maintenance(this.queryParams).then((res) => {
        this.imgItems[0].amount = res.notDisposed;
        this.imgItems[1].amount = res.efficiency;
        if (res.statusList.length > 0) {
          res.statusList.forEach((i) => {
            if (i.statusValue == "0") {
              this.pieData[0].count = i.count;
            } else if (i.statusValue == 1) {
              this.pieData[1].count = i.count;
            }
            this.$refs.pieEchartRef.getData(this.pieData);
          });
        }
      });
    },
    /** 切换按钮 */
    handleTabs(index) {
      this.currentIndex = index;
      if (index == 0) {
        this.keyItem = this.keyAllItem.metricsData;
      } else {
        this.keyItem = this.keyAllItem.ruleData;
      }
      this.$refs.radarRef.getData(this.keyItem);
    },
    /** 列表查询 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /**  点击监管重点关注项 */
    handleSupervisionFocus(item, index) {
      if (index == 0 || index == 1) {
        this.$router.push("/vscreen/dynamicCompliance");
      } else {
        this.queryEventList({ typeCode: item.code, ...this.queryParams });
        this.imgFormObj.searchData = {
          typeCode: item.code,
          ...this.queryParams,
        };
        let _self = this;
        setTimeout(function () {
          _self.$refs.safeConcernsDialogRef.open = true;
        }, 500);
      }
    },
    /**  搜索 */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
        this.queryEventList(data);
      } else {
        this.queryEventList({ ...data, searchType: this.searchType || "1" });
      }
    },
    /** 点击饼状图  */
    handlePieClick(data) {
      this.queryEventList({
        disposalStatus: data == "未处置" ? "0" : "1",
        ...this.queryParams,
      });
      this.imgFormObj.searchData = {
        disposalStatus: data == "未处置" ? "0" : "1",
        ...this.queryParams,
      };
      let _self = this;
      setTimeout(function () {
        _self.$refs.safeConcernsDialogRef.open = true;
      }, 500);
    },
    /**  点击数字显示弹窗   */
    handleNumClick(param) {
      if (param.title == "监管指标") {
        this.queryRegulatoryList(this.queryParams);
        let _self = this;
        setTimeout(function () {
          _self.$refs.regulatoryDialogRef.open = true;
        }, 500);
      } else {
        this.queryBehaviorList(this.queryParams);
        let _self = this;
        setTimeout(function () {
          _self.$refs.behaviorDialogRef.open = true;
        }, 500);
      }
    },
    /**  获取监管指标列表 */
    queryRegulatoryList(query) {
      regulatoryTableList(query).then((res) => {
        this.regulatoryTableData.total = res.total;
        this.regulatoryTableData.tableData = res.list;
      });
    },
    /** 获取行为列表 */
    queryBehaviorList(query) {
      behaviorTableList(query).then((res) => {
        this.behaviorTableData.total = res.total;
        this.behaviorTableData.tableData = res.list;
      });
    },
    /**  搜搜 */
    getRegulatoryTableList(data) {
      this.queryRegulatoryList(data);
    },
    /**  搜搜 */
    getBehaviorTableList(data) {
      this.queryBehaviorList(data);
    },
    /** 运维协同  --弹窗详情*/
    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val.row.id
      );
    },
    operateMetrics(val) {
      window.open(
        window.urlPrefix +
          "icp/metricsDetail?metricsBaseCode=" +
          val.row.metricsCode
      );
    },
    operateBehavior(val) {
      // window.open(window.urlPrefix + 'dispose/incidentHandle/detail?id='+val.row.id)
    },
    /** 循环 */
    dataSuperviseLoop() {
      this.supervise_timer = setInterval(() => {
        if (this.currentIndex == 0) {
          this.$refs.tabListRef.handleClick(1);
        } else {
          this.$refs.tabListRef.handleClick(0);
        }
      }, 6000);
    },
    dataCollaborativeLoop() {
      this.collaborative_timer = setInterval(() => {
        this.getMaintenance();
      }, 6000);
    },
    handleMouseover() {
      clearInterval(this.supervise_timer);
    },
    handleMouseLeave() {
      this.dataSuperviseLoop();
    },
    handleCollaborativeMouseover() {
      clearInterval(this.collaborative_timer);
    },
    handleCollaborativeMouseLeave() {
      this.dataCollaborativeLoop();
    },
  },
  destroyed() {
    clearInterval(this.supervise_timer);
    clearInterval(this.collaborative_timer);
  },
};
</script>

<style lang="scss" scoped>
.matters {
  display: flex;
  justify-content: space-between;

  & > div {
    width: 260px;
    padding: 15px 25px;
    border: 1px solid #152f8d;
    border-radius: 2px;
    text-align-last: left;

    span {
      margin-right: 10px;
      color: #ff3535;
      font-size: 20px;
      font-weight: 500;
    }
  }
}

.module-top-wk {
  display: flex;
  height: 95%;
  flex-direction: column;
  justify-content: space-between;
}

.right-module-top {
  height: 40%;
}

.right-module-middle {
  height: 26%;
}

.right-module-bottom {
  height: 30%;
}

.module-top-t {
  margin-top: 0.8rem;

  img {
    width: 30%;
    margin-right: 1rem;
  }

  .section-dec {
    flex: 1;
    margin-left: 0.8rem;

    p {
      text-align: left;
    }
  }
}

.module-top-m {
  height: 42%;
}

.module-top-m,
.module-top-b {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.module-flex {
  justify-content: space-between;
}

.concernlists {
  width: 48%;
}

.center-bottom-l-cont {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(100% - 1rem);

  .pieList {
    width: 40%;

    .pielist-item {
      display: flex;
      align-items: center;
      //justify-content: space-between;
      padding: 0.5rem 1rem;
      background: rgba(14, 85, 154, 0.3);
      margin-bottom: 0.8rem;
      text-align: left;

      .pielist-item-name {
        width: 60%;
        text-align: left;
        margin-left: 1rem;
      }

      i {
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 100%;

        &.pie-icon-0 {
          background: #ff5f87;
        }

        &.pie-icon-1 {
          background: #ffc652;
        }

        &.pie-icon-2 {
          background: #2888ff;
        }

        &.pie-icon-3 {
          background: #00dee0;
        }
      }

      .pie-count-0 {
        color: #ff5f87;
      }

      .pie-count-1 {
        color: #ffc652;
      }

      .pie-count-2 {
        color: #2888ff;
      }
    }
  }
}

.module-key-wk {
  height: 90%;
  flex-wrap: wrap;
  justify-content: space-around;

  .module-key-list {
    width: 48%;
    margin: 0.5rem 0;
    cursor: pointer;
  }
}

::v-deep .border-list-wk {
  width: 30%;
}
</style>
